<template>
  <div>
    <el-dialog
      title="会员资料"
      v-model="state.isShow"
      lock-scroll
      :close-on-click-modal="false"
      draggable
      align-center
      width="700px"
      @closed="closed"
    >
      <div v-loading="state.loading">
        <div class="grid grid-cols-2 gap-x-[10px]">
          <ul class="border">
            <li class="item">
              <div class="label">ID</div>
              <div class="content">
                <el-input readonly :value="memberInfo?.UserId"></el-input>
              </div>
            </li>
            <li class="item">
              <div class="label">会员账号</div>
              <div class="content">
                <el-input readonly :value="memberInfo?.Name"></el-input>
              </div>
            </li>
            <li class="item">
              <div class="label">会员昵称</div>
              <div class="content">
                <el-input readonly :value="memberInfo?.Nickname || '---'"></el-input>
              </div>
            </li>
            <li class="item">
              <div class="label">会员微信</div>
              <div class="content">
                <el-input readonly :value="wechat.BankNumber || '---'"></el-input>
              </div>
            </li>
            <li class="item">
              <div class="label">会员QQ</div>
              <div class="content">
                <el-input readonly :value="wechat.Qq || '---'"></el-input>
              </div>
            </li>
            <li class="item">
              <div class="label">支付宝账号</div>
              <div class="content">
                <el-input readonly :value="alipay.BankNumber || '---'"></el-input>
              </div>
            </li>
            <li class="item">
              <div class="label">支付宝姓名</div>
              <div class="content">
                <el-input readonly :value="alipay.BankUsername || '---'"></el-input>
              </div>
            </li>
          </ul>
          <ul class="border">
            <li class="item">
              <div class="label">支付宝支付</div>
              <div class="content py-[5px]">
                <avatar :size="44" :src="alipay.QrCode" />
              </div>
            </li>
            <li class="item">
              <div class="label">微信支付</div>
              <div class="content py-[5px]">
                <avatar :size="43" :src="wechat.QrCode" />
              </div>
            </li>
            <li class="item">
              <div class="label">银行卡姓名</div>
              <div class="content">
                <el-input readonly :value="bank.BankUsername || '---'"></el-input>
              </div>
            </li>
            <li class="item">
              <div class="label">银行卡类型</div>
              <div class="content">
                <el-input readonly :value="bank.BankName || '---'" />
              </div>
            </li>
            <li class="item">
              <div class="label">银行卡开户地</div>
              <div class="content">
                <el-input readonly :value="bank.BankAddress || '---'" />
              </div>
            </li>
            <li class="item">
              <div class="label">银行卡账号</div>
              <div class="content">
                <el-input readonly :value="bank.BankNumber || '---'" />
              </div>
            </li>
            <template v-if="usdt.length">
              <li class="item">
                <div class="label">虚拟币</div>
                <div class="content">
                  <el-button type="success" size="small" @click="state.isUsdtShow = true">
                    详细
                  </el-button>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="虚拟币"
      v-model="state.isUsdtShow"
      lock-scroll
      :close-on-click-modal="false"
      draggable
      align-center
      width="500px"
      @closed="state.isUsdtShow = false"
    >
      <ul class="border">
        <template v-for="item in usdt">
          <li class="item">
            <div class="label">虚拟币支付</div>
            <div class="content py-[5px]">
              <avatar :size="43" :src="item.QrCode" />
            </div>
          </li>
          <li class="item">
            <div class="label">虚拟币名称</div>
            <div class="content">
              {{ item.BankName || "---" }}
            </div>
          </li>
          <li class="item">
            <div class="label">虚拟币地址</div>
            <div class="content">
              <el-input readonly :value="item.BankNumber || '---'" />
            </div>
          </li>
        </template>
      </ul>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reqUserInfo } from "@/api/user";

type BankInfoMo = MemberInfoMo["BankInfo"][0];

const props = withDefaults(
  defineProps<{
    uid?: number;
  }>(),
  {}
);
const state = reactive({
  loading: false,
  isShow: false,
  isUsdtShow: false,
  note: "",
  uploading: false
});
const defaultPaymentData: BankInfoMo = {
  BankAddress: "",
  BankName: "",
  BankNumber: "",
  BankType: <1 | 2 | 3 | 4>1,
  BankUsername: "",
  Id: 0,
  Qq: "",
  QrCode: ""
};
const wechat = ref<BankInfoMo>({
  ...defaultPaymentData
});
const alipay = ref<BankInfoMo>({
  ...defaultPaymentData,
  BankType: 2
});
const bank = ref<BankInfoMo>({
  ...defaultPaymentData,
  BankType: 3
});
const usdt = ref<BankInfoMo[]>([]);

const emit = defineEmits(["update"]);
const memberInfo = ref<MemberInfoMo | null>(null);
const getData = async () => {
  if (!props.uid) return;
  try {
    state.loading = true;
    const res = await reqUserInfo(props.uid);
    state.loading = false;
    memberInfo.value = res.data;
    state.note = memberInfo.value?.Note || "";
    const wechatData = res.data.BankInfo.find(item => item.BankType === 1)!;
    if (wechatData) {
      wechat.value = wechatData;
    }
    const alipayData = res.data.BankInfo.find(item => item.BankType === 2)!;
    if (alipayData) {
      alipay.value = alipayData;
    }
    const bankData = res.data.BankInfo.find(item => item.BankType === 3)!;
    if (bankData) {
      bank.value = bankData;
    }
    usdt.value = res.data.BankInfo.filter(item => item.BankType === 4);
  } catch (error) {
    state.loading = false;
    console.log(error);
  }
};
const closed = () => {
  state.isShow = false;
};
const open = () => {
  state.isShow = true;
  getData();
  state.note = "";
};

defineExpose({
  open
});
</script>
<style scoped>
.item {
  @apply flex items-center  border-b-[1px] border-solid border-[#ebebeb];
}
.label {
  @apply pl-[10px] flex items-center border-r-[1px] border-solid border-[#ebebeb] w-[100px] h-[36px];
}
.content {
  @apply flex-1 w-0 px-[5px];
}
.content .el-input {
  @apply !w-full h-[26px];
}
</style>
<style scoped lang="scss">
:deep(.el-dialog__body) {
  padding: 0px;
}
</style>
